<template>
	<view class="storeBox">
		<myHeader :checkIndex='0'></myHeader>
		<view class="screenBox">
			<view class="">
				<view class="" :class="{'check':orderStateCheck}" @click="changeOrderState">
					<view class="title">
						<view class="">商户订单状态</view>
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/downArrow.png" mode="">
						</image>
					</view>
					<view class="controlBox">
						<view class="" :class="{'checkIndex':orderStateIndex==index}"
							v-for="(item,index) in orderStateList" :key="index"
							@click.stop="changeOrderCheckIndex(index)">{{item}}</view>
					</view>
				</view>
				<view class="" :class="{'check':deliveryStateCheck}" @click="changeDeliveryState">
					<view class="title">
						<view class="">配送取餐状态</view>
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/downArrow.png" mode="">
						</image>
					</view>
					<view class="controlBox">
						<view class="" :class="{'checkIndex':deliveryStateIndex==index}"
							v-for="(item,index) in deliveryStateList" :key="index"
							@click.stop="changeDeliveryCheckIndex(index)">{{item}}</view>
					</view>
				</view>
				<view class="">日期：{{today}}</view>
			</view>
			<view class="">
				<view class="">
					<view class="title" @click="showPosiAlert">
						<view class="">站点：{{siteAddress.name}}</view>
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/downArrow.png" mode="">
						</image>
					</view>
				</view>
				<view class="">
					<view class="title" @click="showCompanyAlert">
						<view class="">企业：{{company.companyShortName}}</view>
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/downArrow.png" mode="">
						</image>
					</view>
				</view>
				<view class="">总销量：{{totalSales}}</view>
			</view>
		</view>
		<view class="tableContent">
			<view class="table" :style="{'width':trWidthTotal+'rpx'}">
				<view class="tr">
					<view class="td left" :style="{'width':tdWidthArr[0]+'rpx'}">店铺名称</view>
					<view class="td" :style="{'width':tdWidthArr[1]+'rpx'}">销量</view>
					<view class="td" :style="{'width':tdWidthArr[2]+'rpx'}">店铺状态</view>
					<view class="td" :style="{'width':tdWidthArr[3]+'rpx'}">配送状态</view>
					<view class="td" :style="{'width':tdWidthArr[4]+'rpx'}">站点</view>
					<view class="td" :style="{'width':tdWidthArr[5]+'rpx'}">营业状态</view>
				</view>
				<view class="tr" v-for="(item,index) in storeList" :key="index" @click="goStore(item)">
					<view class="td left" :style="{'width':tdWidthArr[0]+'rpx'}">{{item.storeName}}</view>
					<view class="td" :style="{'width':tdWidthArr[1]+'rpx'}">{{item.storeSales}}</view>
					<view class="td" :style="{'width':tdWidthArr[2]+'rpx'}"
						:class="{'error':item.storeStatus=='未接单','success':item.storeStatus=='已出餐','normal':item.storeStatus=='出餐中'}">
						{{item.storeStatus}}
					</view>
					<view class="td" :style="{'width':tdWidthArr[3]+'rpx'}">
						<view class="but" @click="pickUpMeals(item)">
							{{item.deliveryStatus}}
						</view>
					</view>
					<view class="td" :style="{'width':tdWidthArr[4]+'rpx'}">{{item.siteName}}</view>
					<view class="td" :style="{'width':tdWidthArr[5]+'rpx'}"
						:class="{'error':item.businessState=='打烊','normal':item.businessState=='营业中'}">
						{{item.businessState}}
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="">
			<view class="storeList" v-for="(item,index) in storeList" :key="index">
				<view class="name">
					<view class="">
						<image :src="item.logo|getImg" mode="">
						</image>
						{{item.storeName}}
					</view>
					<view class="" @click="exportExcel(item.id)">
						导出打印
					</view>
				</view>
				<view class="list">
					<view class="">
						门店状态: <text
							:class="{'error':item.storeStatus=='未接单','ing':item.storeStatus=='出餐中','success':item.storeStatus=='已出餐'}">{{item.storeStatus}}</text>
					</view>
					<view class="">
						门店销量: <text>{{item.storeSales}}</text>
					</view>
				</view>
				<view class="list">
					<view class="">
						配送状态: <text
							:class="{'error':item.deliveryStatus=='未取餐','ing':item.deliveryStatus=='出餐中','success':item.deliveryStatus=='已出餐'}">{{item.deliveryStatus}}</text>
					</view>
					<view class="">
						日期: <text>{{item.globalPageDate}}</text>
					</view>
				</view>
				<view class="control">
					<view class="button" @click="pickUpMeals(item.id)"
						v-if="item.storeStatus=='已出餐'&&item.deliveryStatus=='未取餐'">点击取餐</view>
				</view>
			</view>
		</view> -->
		<u-toast ref="uToast"></u-toast>
		<u-modal v-model="visiable" content="是否领取该订单？" :show-cancel-button="true" @confirm="confirm"></u-modal>

		<!-- 底部地点选择 -->
		<view class="posiBottom">
			<u-popup v-model="posiShow" mode="bottom" :closeable="true" @touchmove.stop.prevent="">
				<view class="posiContent">
					<view class="">请选择站点</view>
					<view class="listContent">
						<view class="list" v-for="(item,index) in addressList" :key="index"
							@click="checkThisAddress(item)">{{item.name}}</view>
					</view>
				</view>
			</u-popup>
		</view>
		
		
		<!-- 企业选择 -->
		<view class="posiBottom">
			<u-popup v-model="chooseCompanyShow" mode="bottom" :closeable="true" @touchmove.stop.prevent="">
				<view class="posiContent">
					<view class="">请选择企业</view>
					<view class="listContent">
						<view class="list" v-for="(item,index) in companyList" :key="index"
							@click="checkThisCompany(item)">{{item.companyShortName}}</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getStoreListInfo,
		exportExcelById,
		changeGoodState,
		getSiteList,
		getStoreDataInfo,
		getAllCompanyList,
		getGlobalMerchantOrderList,
	} from '@/utils/req/api.js'
	import myHeader from '../../components/header/header.vue'
	export default {
		components: {
			myHeader
		},
		data() {
			return {
				orderStateCheck: false,
				orderStateIndex: '0',
				orderStateList: ['不限', '未接单', '出餐中', '已出餐'],
				deliveryStateCheck: false,
				deliveryStateIndex: '0',
				deliveryStateList: ['不限', '未取餐', '已取餐'],
				totalSales: 666, //总销量

				storeList: [],
				pageNo: 1,
				pageSize: 40,
				moreStoreFlag: false, //加载更多的阀门
				storeStatus: null, //商户订单状态
				deliveryStatus: null, //配送取餐状态
				visiable: false, //确认取餐弹窗的显隐
				clickInfo: '', //点击取餐时临时存储订单信息
				today: '',
				tdWidthArr: [4, 4, 4, 4, 3, 2],
				trWidthTotal: 300,

				siteAddress: {
					id: '',
					name: '全部'
				},
				posiShow: false, //站点下拉框的显隐
				addressList: [], //站点列表
				
				company: {
					id: 'notQuery',
					companyShortName: '不查询'
				},
				chooseCompanyShow: false, //公司下拉框的显隐
				companyList: [], //公司列表
			}
		},
		onLoad() {

		},
		onShow() {
			this.getStoreList();
		},
		mounted() {
			this.today = new Date().getMonth() + 1 + '-' + new Date().getDate();
			this.getSiteList();
			this.getAllCompanyList();
			this.getStoreDataInfo()
		},
		methods: {
			async getStoreDataInfo() {
				let res = await getStoreDataInfo();
				this.totalSales = res.data.result.orderCount;
			},
			showPosiAlert() {
				this.posiShow = true;
				this.orderStateCheck = false;
				this.deliveryStateCheck = false;
			},
			
			showCompanyAlert() {
				this.chooseCompanyShow = true;
				this.orderStateCheck = false;
				this.deliveryStateCheck = false;
			},
			
			//获取地址列表
			async getSiteList() {
				let res = await getSiteList();
				this.addressList = res.data.result;
				this.addressList.unshift({
					id: '',
					name: '全部'
				})
				console.log('this.addressList', this.addressList);
			},
			
			//选中当前站点
			async checkThisAddress(item) {
				this.siteAddress = item;
				this.posiShow = false;
				this.getStoreList()
			},
			
			// 获取企业列表
			async getAllCompanyList() {
				let res = await getAllCompanyList();
				this.companyList = res.data.result || [];
				this.companyList.unshift({
					id: '',
					companyShortName: '全部'
				})
				this.companyList.unshift({
					id: 'notQuery',
					companyShortName: '不查询'
				})
				console.log('this.companyList', this.companyList);
			},
			
			// 选中当前企业
			async checkThisCompany(item) {
				this.company = item;
				this.chooseCompanyShow = false;
				this.getStoreList()
			},
			
			
			
			go() {
				let link = document.createElement('a')
				link.style.display = 'none'
				link.href = 'http://www.baidu.com';
				link.setAttribute('download', new Date().getTime() + '.xls')
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link); //下载完成移除元素
				window.URL.revokeObjectURL(url); //释放掉blob对象
			},
			
			async getStoreList() {
				// 当企业选项为“不查询”时，调用个人订单的接口，否则调用企业订单的接口查询
				if (this.company.id == 'notQuery') {
					let res = await getStoreListInfo({
						pageNo: 1,
						pageSize: this.pageNo * this.pageSize,
						storeStatus: this.storeStatus,
						deliveryStatus: this.deliveryStatus,
						siteId: this.siteAddress.id
					})
					this.storeList = [];
					this.storeList = res.data.result.records;
				} else {
					let param = {};
					if (this.company.id != '') {
						param.companyId = this.company.id;
					}
					let res = await getGlobalMerchantOrderList(param)
					this.storeList = [];
					this.totalSales = res.data.result.totalSaleCount || 0;
					this.storeList = res.data.result.merchantData || [];
				}
				

				let trWidthTotal = 0;
				this.tdWidthArr = [4, 4, 4, 4, 3, 2];
				this.storeList.forEach(item => {
					if (item.storeName && item.storeName.length > this.tdWidthArr[0]) {
						this.tdWidthArr[0] = item.storeName.length
					}
					if (item.siteName && item.siteName.length > this.tdWidthArr[4]) {
						this.tdWidthArr[4] = item.siteName.length
					}
					item.storeSales = item.storeSales === null ? 0 : item.storeSales;
					item.storeSales = this.company.id == 'notQuery' ? item.storeSales : (item.merchantSaleCount || 0)
				})
				this.tdWidthArr.forEach((item, index) => {
					// this.$set(this.tdWidthArr, index, item * 28 + 20)
					// trWidthTotal = trWidthTotal + (item * 28 + 20);
					this.$set(this.tdWidthArr, index, item * 30 + 20)
					trWidthTotal = trWidthTotal + (item * 30 + 20);
				})
				this.trWidthTotal = trWidthTotal + 20;
				console.log(this.tdWidthArr)
				console.log(this.trWidthTotal);
				
				this.sortOrderList();
			},
			
			// 订单排序
			sortOrderList() { 
				this.storeList.sort((a, b) => {
					return (b.storeSales) - (a.storeSales)
				})
			},
			
			exportExcel(id) {
				uni.navigateTo({
					url: '/pages/export/export?merchantId=' + id + '&token' + uni.getStorageSync('token')
				})
			},
			changeOrderState() {
				this.orderStateCheck = !this.orderStateCheck;
			},
			changeOrderCheckIndex(index) {
				this.orderStateIndex = index;
				switch (index) {
					case 0:
						this.storeStatus = null;
						break;
					case 1:
						this.storeStatus = "NO";
						break;
					case 2:
						this.storeStatus = 'WAIT';
						break;
					case 3:
						this.storeStatus = 'YES';
						break;
				}
				this.getStoreList()
				this.orderStateCheck = false;
			},
			changeDeliveryState() {
				this.deliveryStateCheck = true;
			},
			changeDeliveryCheckIndex(index) {
				this.deliveryStateIndex = index;
				switch (index) {
					case 0:
						this.deliveryStatus = null;
						break;
					case 1:
						this.deliveryStatus = 'NO';
						break;
					case 2:
						this.deliveryStatus = 'YES';
						break;
				}
				this.getStoreList()
				this.deliveryStateCheck = false;
			},
			goStore(item) {
				if (this.company.id == '') {
					this.$showToast.call(this, '查看企业订单详情，请先从企业下拉项选择具体的企业', 'warning');
					return;
				}
				console.log(JSON.parse(JSON.stringify(item)), '-------+++++++++++-------')
				let companyId = '';
				if (this.company.id != 'notQuery') {
					// 查询了具体的企业
					companyId = this.company.id
				}
				let url = './merchant?merchantId=' + item.id + '&companyId=' + companyId;
				uni.navigateTo({
					url: url
				})
			},
			//取餐
			async pickUpMeals(item) {
				this.clickInfo = item;
				if (item.businessState == '打烊') {
					this.$showToast.call(this, '当前商家已打烊，无法取餐', 'warning');
					return;
				}
				if (item.storeStatus == '未接单') {
					this.$showToast.call(this, '当前商家未接单，无法取餐', 'warning');
					return;
				}
				if (item.storeStatus == '出餐中') {
					this.$showToast.call(this, '当前商家出餐中，无法取餐', 'warning');
					return;
				}
				if (item.deliveryStatus == '已取餐') {
					this.$showToast.call(this, '当前商家订单已派送，请勿点击', 'warning');
					return;
				}
				this.visiable = true;
			},
			async confirm() {
				console.log('我确定了')
				let res = await changeGoodState({
					id: this.clickInfo.id
				});
				this.getStoreList()
			},
		},
		onReachBottom() {
			if (!this.moreStoreFlag) {
				console.log(this.storeList.length, this.pageSize, this.storeList.length % this.pageSize)
				if (this.storeList.length != 0 && this.storeList.length % this.pageSize == 0) {
					this.pageNo = this.pageNo + 1;
					this.moreStoreFlag = true
					this.getStoreList();
					setTimeout(() => {
						this.moreStoreFlag = false;
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.storeBox {
		background-color: #F5F5F5;
		padding-bottom: 40rpx;
		min-height: 100vh;
	}

	.screenBox {
		padding: 10rpx 20rpx;
		background-color: #fff;
		border-top: 1px solid #eee;

		>view:nth-child(2) {
			>view {
				width: auto;
			}
		}

		>view {
			@include flex();
			flex-wrap: wrap;

			>view {
				position: relative;

				// font-size: 28rpx;
				font-size: 30rpx;
				line-height: 1.5;
				margin: 10rpx 30rpx 10rpx 0;

				.title {
					@include flex();

					image {
						width: 20rpx;
						height: 20rpx;
						// transform: rotate(-90deg);
						margin-left: 10rpx;
					}
				}

				.controlBox {
					position: absolute;
					left: 0;
					top: 110%;
					width: 70%;
					background-color: #fff;
					box-shadow: 0 0 5px #fafafa;
					border: 1px solid #eee;
					display: none;
					z-index: 2;
					padding: 8rpx 0;
					border-bottom-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;

					>view {
						padding: 0 20rpx;
						text-align: center;
						color: rgba(0, 0, 0, 0.35);
					}

					>.checkIndex {
						color: #FA690A;
					}
				}
			}

			>.check {
				.controlBox {
					display: block;
				}
			}
		}
	}

	.tableContent {
		padding: 40rpx 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
		overflow-x: auto;

		.table {
			width: 100%;
			// border: 1px solid;

			.tr {
				width: 100%;
				// @include flex();
				padding: 5rpx 0;
				border-bottom: 1px solid #eee;

				&:last-child {
					border: 0;
				}

				.td {
					display: table-cell;
					font-size: 30rpx;
					// font-size: 28rpx;
					width: 18%;
					min-width: calc(28rpx * 5);
					text-align: center;
					line-height: 2;
					padding: 10rpx;

					&:nth-child(1) {
						width: 28%;
					}

					.but {
						background-color: #FA690A;
						color: #fff;
						border-radius: 10rpx;
					}
				}

				.left {
					text-align: left;
				}

				.error {
					color: #E06262;
				}

				.success {
					color: #7CCF85;
				}

				.normal {
					color: #000;
				}
			}
		}
	}

	.storeList {
		padding: 40rpx;
		margin: 20rpx 0;
		background-color: #fff;

		>.name {
			@include flex(space-between, center);

			>view {
				@include flex();
				font-size: 28rpx;
				line-height: 2;
				font-weight: 600;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				&:nth-child(2) {
					width: 140rpx;
					height: 58rpx;
					background-color: #FA690A;
					color: #fff;
					border-radius: 100rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					line-height: 58rpx;
					text-align: center
				}
			}
		}

		>.list {
			@include flex();
			font-size: 28rpx;
			line-height: 2;
			margin: 10rpx 0;
			color: rgba(0, 0, 0, 0.55);

			text {
				margin-left: 10rpx;
				color: #000;
			}

			.error {
				color: #E06262;
			}

			.ing {
				color: #6ABCEB;
			}

			.success {
				color: #7CCF85;
			}


			>view {
				width: 50%;
			}
		}

		>.control {
			@include flex(flex-end, center);

			>view {
				font-size: 28rpx;
				line-height: 2;
				border-radius: 60rpx;
				padding: 0 20rpx;
				background-color: #FA690A;
				color: #fff;
			}
		}
	}


	.posiContent {
		padding: 18px 10px 20px 10px;
		>view {
			&:nth-child(1) {
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.35);
				margin-bottom: 14rpx;
			}
		}

		>.listContent {
			margin-top: 10rpx;

			.list {
				border-bottom: 1px solid rgba(0, 0, 0, 0.05);
				font-size: 28rpx;
				line-height: 40rpx;
				padding: 24rpx 0;

				&:last-child {
					border-bottom: 0;
				}

				&:nth-child(1) {
					font-weight: bold;
					font-size: 30rpx;
				}
			}
		}
	}
</style>
<style lang="scss">
	.posiBottom {
		/deep/ {
			.u-drawer-bottom {
				width: 100% !important;
				padding: 36rpx 20rpx 40rpx 20rpx;
				border-top-left-radius: 40rpx;
				border-top-right-radius: 40rpx;
				min-height: 30vh;
				max-height: 80vh;
				overflow: auto;
				padding-left: 0;
				padding-right: 0;
			}

			.u-drawer__scroll-view {
				max-height: 60vh !important;
			}
		}
	}
</style>